<template>
  <div class="pad-out-box">
    <el-form label-width="170px" size="small" :model="searchParams" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="资产编号">
            <el-select v-model="searchParams.spaceCodeList" clearable filterable multiple>
              <el-option v-for="item in spaceCodeList" :key="item.shopCode" :label="item.shopNumber" :value="item.shopCode" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同类型">
            <el-select v-model="searchParams.contractTypeList" clearable filterable multiple>
              <el-option v-for="item in contractTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同名称">
            <el-input maxlength="200" placeholder="请输入" v-model="searchParams.contractName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同文件名称">
            <el-input maxlength="200" placeholder="请输入" v-model="searchParams.fileName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同状态">
            <el-select v-model="searchParams.contractStatusList" clearable filterable multiple>
              <el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户/供应商">
            <el-input maxlength="200" placeholder="请输入" v-model="searchParams.partnerName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同开始时间">
            <el-date-picker v-model="searchParams.contractBeginDate" type="date" value-format="timestamp" :picker-options="pickerOptionsStart" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同结束时间">
            <el-date-picker v-model="searchParams.contractEndDate" type="date" value-format="timestamp" :picker-options="pickerOptions" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编码">
            <el-input maxlength="200" placeholder="请输入" v-model="searchParams.contractCode" clearable></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="合同名称">
            <el-input placeholder="请输入" v-model="searchParams.contractName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同类型">
            <el-select v-model="searchParams.contractType" clearable>
              <el-option v-for="item in contractTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同状态">
            <el-select v-model="searchParams.contractStatus" clearable>
              <el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同开始时间">
            <el-date-picker v-model="searchParams.contractBeginDate" type="date" value-format="timestamp" :picker-options="pickerOptionsStart" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同结束时间">
            <el-date-picker v-model="searchParams.contractEndDate" type="date" value-format="timestamp" :picker-options="pickerOptions" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否标准合同">
            <el-select v-model="searchParams.ifStandardContract" clearable>
              <el-option v-for="item in rightWrongList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="对方名称">
            <el-input placeholder="请输入" v-model="searchParams.partnerName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="对方手机号">
            <el-input placeholder="请输入" v-model="searchParams.partnerMobile" clearable></el-input>
          </el-form-item>
        </el-col>
        <div class="split-line"></div>
        <el-col :span="8">
          <el-form-item label="功能分区">
            <el-select v-model="searchParams.spacePartition" clearable @change="getFloornList">
              <el-option v-for="item in partitionList" :key="item.primaryKey" :label="item.partitionName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="楼层">
            <el-select v-model="searchParams.floor" clearable :disabled="searchParams.spacePartition ? false : true">
              <el-option v-for="item in floorList" :key="item.primaryKey" :label="item.floorName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产类型">
            <el-select v-model="searchParams.assetType" clearable>
              <el-option v-for="item in assetTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商铺名称">
            <el-input placeholder="请输入" v-model="searchParams.shopName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产编码">
            <el-input placeholder="请输入" v-model="searchParams.spaceCode" clearable></el-input>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="是否主力店">
            <el-select v-model="searchParams.ifMainStore" clearable>
              <el-option v-for="item in rightWrongList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租金单价大于">
            <el-input placeholder="请输入" type="number" v-model="searchParams.geRentUnitPrice" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租金单价小于">
            <el-input placeholder="请输入" type="number" v-model="searchParams.leRentUnitPrice" clearable></el-input>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="业务类型">
            <el-select v-model="searchParams.businessType" clearable>
              <el-option v-for="item in businessTypeList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="管理费单价大于">
            <el-input placeholder="请输入" type="number" v-model="searchParams.geManagementUnitPrice" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管理费单价小于">
            <el-input placeholder="请输入" type="number" v-model="searchParams.leManagementUnitPrice" clearable></el-input>
          </el-form-item>
        </el-col>
        <div class="split-line"></div>
        <el-col :span="8">
          <el-form-item label="支出子类">
            <el-select v-model="searchParams.paymentSubType" clearable>
              <el-option v-for="item in paySonList" :key="item.primaryKey" :label="item.chargeItemName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否关联资本性支出">
            <el-select v-model="searchParams.linkCapitalExpenditure" clearable>
              <el-option v-for="item in isStandardList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备系统">
            <el-select v-model="searchParams.system" clearable @change="getSonSystemList">
              <el-option v-for="item in systemList" :key="item.primaryKey" :label="item.systemName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备子系统">
            <el-select v-model="searchParams.subSystem" clearable :disabled="searchParams.system ? false : true">
              <el-option v-for="item in systemSonList" :key="item.primaryKey" :label="item.systemName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备名称">
            <el-input placeholder="请输入" type="number" v-model="searchParams.deviceName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设施名称">
            <el-input placeholder="请输入" type="number" v-model="searchParams.facilityType" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支出总金额大于">
            <el-input placeholder="请输入" type="number" v-model="searchParams.geTotalAmount" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支出总金额小于">
            <el-input placeholder="请输入" type="number" v-model="searchParams.leTotalAmount" clearable></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-button type="primary" size="large" class="f-right" @click="getTableData('')">查询</el-button>
          <el-button size="large" class="f-right margin-right-10" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table :border="true" :data="tableData">
        <el-table-column align="center" label="项目名称" prop="projectName" />
        <el-table-column align="center" label="合同名称" prop="contractName" />
        <el-table-column align="center" label="合同编号" prop="contractCode" />
        <el-table-column align="center" label="资产编号" prop="assetName" />
        <el-table-column align="center" label="客户/供应商" prop="partnerName" />
        <el-table-column align="center" label="合同类型" prop="status">
          <template slot-scope="scope">
            <span>{{ getContractName(scope.row.contractType) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同开始时间" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.contractBeginDate | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同结束时间" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.contractEndDate | formatDateTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="合同状态" prop="status">
          <template slot-scope="scope">
            <span>{{ getStatusName(scope.row.contractStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" prop="remark">
          <template slot-scope="scope">
            <el-button type="text" @click="goPage(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination @change="pageChange" :total="total" />
    </div>
  </div>
</template>
<script>
  import { apiContrantList } from '../../../api/contract';
  import commonMixin from '../../../mixin';

  export default {
    mixins: [commonMixin],

    data() {
      return {
        tableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1,
        isStandardList: [
          { primaryKey: 0, name: '否' },
          { primaryKey: 1, name: '是' },
        ],
      };
    },

    mounted() {
      this.getAssetCodeList();
      this.getOptionList();
    },

    methods: {
      //数据源
      async getTableData(type) {
        let param = {
          pageSize: this.pageSize,
          currentPage: type ? this.currentPage : 1,
          status: 1,
          ifContractManage: true,
          projectKeys:[localStorage.getItem("projectKey")]
        };
        for (let i in this.searchParams) {
          param[i] = this.searchParams[i] === '' ? null : this.searchParams[i];
        }
        let res = await apiContrantList(param);
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //分页
      pageChange(e) {
        this.currentPage = e.currentPage;
        this.pageSize = e.pageSize;
        this.getTableData('more');
      },
    },
  };
</script>
<style scoped>
  .split-line {
    width: 100%;
    height: 1px;
    margin: 10px 0 30px 0;
    background: #ccc;
    float: left;
  }
</style>
